
<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/" style="border-bottom: 1px solid #ccc;padding: 10px 0;margin-bottom:10px ;">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item
      >订单</el-breadcrumb-item
    >
    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  </el-breadcrumb>

  <OmsSearch @SearchEmit="searchAction"/>
  <OmsList/>

  <el-table style="margin-bottom: 20px;" @selection-change="selectChange" :data="tableData">
    <el-table-column type="selection" width="55" />
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="订单编号" prop="orderSn"></el-table-column>
    <el-table-column label="提交时间" prop="createTime"></el-table-column>
    <el-table-column label="用户账号" prop="memberUsername"></el-table-column>
    <el-table-column label="订单金额" prop="payAmount"></el-table-column>
    <el-table-column label="支付方式" prop="payType"></el-table-column>
    <el-table-column label="订单来源" prop="sourceType"></el-table-column>
    <el-table-column label="订单状态" prop="status"></el-table-column>
    <el-table-column label="操作" fixed="right"></el-table-column>
  </el-table>

  <el-row justify="space-between">
    <el-col :span="8">
      <el-select placeholder="批量操作" v-model="action">
        <el-option label="批量发货" value="0"></el-option>
        <el-option label="关闭订单" value="1"></el-option>
        <el-option label="删除订单" value="2"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left:10px" @click="confirmAction">确定</el-button>
    </el-col>

    <!-- 分页 -->
    <el-col :span="14">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import OmsList from '@/components/c-oms/OmsList.vue';
import { Order } from '@/request/api';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let tableData = ref([])
// 子组件的搜索筛选表单
let form : Order.IreqOrderList = null
// 批量操作
let action = ref("")
// 选中数据
let selected = ref([])


const handleSizeChange = function(param){
  pageSize.value = param
  getTableData()
  
}
const handleCurrentChange = function(param){
  currentPage.value = param
  getTableData()
}
// 获取数据API
const getTableData = async function(){
  const result = await Order.OrderListAPI({...form,pageNum:currentPage.value,pageSize:pageSize.value})
  tableData.value = result.list
  total.value = result.total
  if(tableData.value.length<=0){
    ElMessage.info("暂无数据")
  }
}

//创建时执行
getTableData() 

/**
 * @param 搜索表单
 * 类型：IreqOrderList
 */
const searchAction = async function(param:Order.IreqOrderList){
  // 触发自定义搜索事件
  form = param  
  currentPage.value = 1
  getTableData()
}
// 表格选择项
const selectChange = function(selection){
  selected.value = selection
  
}
// 批量操作确认
const confirmAction = function(){
  if(selected.value.length<=0){
    ElMessage.info("请选择要操作的订单")
    return false
  }
  switch(action.value){
    // 批量发货
    case "0" : 
      let result:Order.TreqDelivery = selected.value.map((item,index)=>{
        return {
          deliveryCompany:item.deliveryCompany,
          deliverySn:item.deliverySn,
          orderId:item.id,
        }
      })
      Order.OrderDeliveryAPI(result)
      break;
      
    case "1":
      // 批量关闭订单
      let arr :Array<number> = selected.value.map((item,index)=>{
        return item.id
      })
      Order.OrderCloseAPI({ids:arr,note:"批量关闭"})
      break;
    case "2":
      // 批量删除订单
      let arrdel :Array<number> = selected.value.map((item,index)=>{
        return item.id
      })
      Order.OrderDeleteAPI({ids:arrdel})
      break;
  }
}

</script>